@extends('layout.default')

@section('stylesheet')
  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.26.0/css/jquery.fileupload.min.css"/>
@stop
@section('layout.content')

  <div class="space-12"></div>
  <div class="row">
    <div class="col-xs-12">
      <form class="form-horizontal" method="post" enctype="multipart/form-data" autocomplete="off">
        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right" for="name"> <b><span class="red">*</span> 礼品名称：</b>
          </label>
          <div class="col-sm-4">
            <input type="text" id="name" name="name" value="{{$gift->name}}" class="form-control" placeholder="礼品名称"/>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right" for="price"> <b><span class="red">*</span> 兑换积分：</b>
          </label>
          <div class="col-sm-2">
            <input type="text" id="price" name="price" value="{{$gift->price}}" maxlength="3" class="form-control"
                   placeholder="礼品兑换积分"/>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right" for="link"> <b>图片（正方形）： </b></label>
          <div class="col-sm-8 set-slider">
            <a href="#" data-rel="colorbox" class="fileinput-button">
              <img class="img-responsive lazy banner" src="/assets/images/placehoder.png" data-original="{{$gift->image}}" style="width:150px;" />
              <input type="file" name="file"/>
            </a>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right" for="idcard"> 状态： </label>
          <div class="col-sm-6">
            <div class="radio">
              <label class="inline no-padding-left">
                <input name="status" type="checkbox" value="1"
                       class="ace ace-checkbox-2 input-lg" {{$gift->status == 1?'checked':''}}>
                <span class="lbl"> 有效</span>
              </label>
            </div>
          </div>
        </div>


        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right" for="branch"> <b>所属分支：</b> </label>
          <label class="col-sm-6 control-label align-left">
            <input type="hidden" id="branch" value="{{Auth('admin')->user()->branch->id}}">
            {{Auth('admin')->user()->branch->name}}
          </label>
        </div>

        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right"> </label>
          <div class="col-sm-6">
            <p>标注星号(<b><span class="red">*</span></b>)为必填项。</p>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-4 control-label no-padding-right"> </label>
          <div class="col-sm-4">
            <button type="button" class="btn btn-primary submit">
              <i class="ace-icon fa fa-check"></i>
              <span class="">确定</span>
            </button>
          </div>
        </div>

      </form>
    </div>
  </div>
@stop

@section('javascript')
  <script src="//cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
  <script type="text/javascript">
  $(function () {
      $(".lazy").lazyload({
        effect : "fadeIn"
      });

      $("input[name='file']").change(function () {
          var objUrl = getObjectURL(this.files[0]);
          console.log("objUrl = " + objUrl);
          if (objUrl) {
              $(".banner").attr("src", objUrl);
          }
      });

      function getObjectURL(file) {
          var url = null;
          if (window.createObjectURL != undefined) { // basic
              url = window.createObjectURL(file);
          } else if (window.URL != undefined) { // mozilla(firefox)
              url = window.URL.createObjectURL(file);
          } else if (window.webkitURL != undefined) { // webkit or chrome
              url = window.webkitURL.createObjectURL(file);
          }
          return url;
      }


      $('.submit').on('click', function () {
          var formData = new FormData();
          formData.append("_token", $("input[name='_token']").val());
          formData.append("_method", 'put');
          formData.append("name", $("input[name='name']").val());
          formData.append("price", $("input[name='price']").val());
          formData.append("status", $("input[name='status']:checked").val());
          formData.append('image', $("input[name='file']")[0].files[0]);

          var uri = '{{route('point.gift.update', $gift->id)}}';
          $.ajax({
              url: uri,
              type: 'POST',
              dataType: "json",
              cache: false,
              data: formData,
              processData: false,
              contentType: false,
              success: function (data) {
                  layer.msg(data.message, {shift: -1}, function () {
                      if (data.status === true && data.url != null) {
                          $(window).attr('location', data.url);
                      }
                  });
              },
              error: function (data) {
                  layer.msg(data.responseJSON.message);
              }
          });
          /*$.post(uri, {
            '_token':$("input[name='_token']").attr('value'),
            'name': $("input[name='name']").val(),
            'price': $("input[name='price']").val(),
            'image': formData,
            'is_submit': true
          }, function(data) {
            console.log(data);
            layer.msg(data.message, { shift: -1 }, function(){
              if(data.status === true && data.url != null ){
                $(window).attr('location', data.url);
              }
            });

          },'json').error(function(data){
            layer.msg(data.responseJSON.message);
          }); */

      });


  });
  </script>
@stop